<template>
	<!-- 头部：头像 用户名 普通会员 -->
<!-- 	中部: -->
	<view class="myself">
		<view class="myself-top">
			<image :src="logo"></image>
			<view class="myself-top-name" @click="reLogin()">{{userName}}</view>
		</view>
		<view class="myself-vip">
			<view class="myself-vip-text">
				<text class="iconfont icon-vip"></text>
				<label>成为会员享三大会员权益</label>	
				<text class="iconfont icon-xiangyoujiantou myself-vip-text-jiantou"></text>
			</view>
			<view class="myself-vip-back"> 
				<image src="../../static/vip.png"></image> 
			</view>	
		</view>
		<view class="myself-list myself-vip-contents">
			<view class="myself-list-contents">
				<view class="myself-list-content">
					<text>1212</text>
					<label>积分</label>
				</view>
				<view class="myself-list-content">
					<text>1212</text>
					<label>优惠券/码</label>
				</view>
				<view class="myself-list-content">
					<text>1212</text>
					<label>零钱</label>
				</view>
				<view class="myself-list-content" @click="starStore()">
					<text>1</text>
					<label>收藏</label>
				</view>
			</view>
		</view>
		<view class="myself-list">
			<view class="myself-list-title">
				<label>我的订单</label>
				<view class="myself-list-title-all" @click="ToallOrder()">
					<text>查看全部订单</text>
					<text class="iconfont icon-xiangyoujiantou"></text>
				</view>		
			</view>
			<view class="myself-list-contents">
				<view class="myself-list-content" v-for="(item,index) in odtap" @click="tapOrder(index)">
					<image :src="item.img"></image>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="myself-foot">
			<view class="myself-foot-title">
				<label>更多精选商品</label>
			</view>
			<view class="myself-foot-contents">
				<view v-for="item in hotList" >
					<list-item :leaf="item" ></list-item>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
		export default{
			data(){
				return{
					odtap:[
						{
							img:"../../static/myself-img/fahuo.png",
							name:'待发货'
						},
						{
							img:"../../static/myself-img/shouhuo.png",
							name:'待收货'
						},
						{
							img:"../../static/myself-img/pingjia.png",
							name:'待评价'
						},
						{
							img:"../../static/myself-img/tuikuan.png",
							name:'退款/售后'
						},
					],
					userName:"",
					logo:"",
					hotList:[],
					img:"https://hbimg.b0.upaiyun.com/149547604c097a5142427b528444691e686f664c12d10-5JfXzF_fw658"
				}
			},
			onLoad(){	
				this.userName=this.$baseName.user.username
				this.logo=this.$baseName.user.logo
				this.getHotList()
				
			},
			methods:{
				reLogin(){
					let id=this.$baseName.user.userid
					if(id==0){
						uni.showToast({
							icon:'error',
							title:'请先登录!'
						})
						uni.switchTab({								// 跳转到登录页面
							url: '../demo3/demo3',
									
						})
						
					}
				},
				starStore(){
					let id=this.$baseName.user.userid
					if(id==0){
						uni.showToast({
							icon:'error',
							title:'请先登录!'
						})
					}else{
						uni.navigateTo({
							url:"../starList/starList?pageSource=myself",
						})
					}
					
				},
				
				getHotList(){
					uni.request({
						url:this.$baseUrl+'hotList',
						success:res=>{
							
							if(res.statusCode!=200){
								return uni.showToast({
									title:'获取数据失败'
								})
							}
							this.hotList=res.data.list
							console.log("热门商品",this.hotList)
						}
					})
				},
				ToallOrder(){
					let id=this.$baseName.user.userid
					if(id==0){
						uni.showToast({
							icon:'error',
							title:'请先登录!'
						})
					}else{
						uni.navigateTo({
							url:"../orders/orders?pageSource=myself",
						})
					}
					
				},
				tapOrder(data){
					
					let id=this.$baseName.user.userid
					if(id==0){
						uni.showToast({
							icon:'error',
							title:'请先登录!'
						})
					}else{
						let oditem=data+1
						console.log("首页搜索内容",data)
						//本地缓存需要传递的参数
						uni.setStorageSync('d',{odval:oditem})
						uni.navigateTo({
							url:"../orders/orders?pageSource=myself",
						})
					}
				}
			}
		}
</script>

<style lang="scss">
	page{
		background: #d1d1d140;
	}
	.myself{
		.myself-top{
			text-align: center;
			padding-top: 40rpx;
			image{
				width: 100rpx;
				height: 100rpx;
				border-radius:100%;
				
			}
			.myself-top-name{
				padding-top: 10px;
			}
		}
		.myself-vip{
			height: 150rpx;
			margin: 20rpx 10rpx;
			position: relative;
			.myself-vip-text{
				position: relative;
				display: flex;
				text{
					color: #b5b50c;
					padding: 12px 10px;
				}
				label{
					padding: 10px 0;
					font-size: small;
				}
				.myself-vip-text-jiantou{
					position: absolute;
					right: 0;
				}
			}
			.myself-vip-back{
				position: absolute;
				top:0;
				right: 0;
				bottom: 0;
				left: 0;	
				// filter: blur(8px);
				opacity: 0.3;
				image{
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
					// box-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.1);
				}
			}
		}
		.myself-vip-contents{
			.myself-list-content{
				label{
					color: #7f7f78d9;
					padding-top: 10px;
				}
			}
		}
		.myself-list{
			background-color: white;
			border-radius:20rpx ;
			margin: 20rpx 10rpx;
			.myself-list-title{
				border-bottom: 1px solid #d1d1d1;
				display: flex;
				justify-content: space-between;
				padding: 10px 5px;
				.myself-list-title-all{
					display: flex;
					font-size: 12px;
					color: darkgrey;
				}
			}
			.myself-list-contents{
				display: flex;
				justify-content: space-around;
				padding: 10px 0;
				.myself-list-content{
					font-size: 12px;
					display: flex;
					flex-direction: column;
					align-items: center;
					image{
						width: 30px;
						height: 30px;
					}
				}
			}	
		}
		.myself-foot{
			.myself-foot-title{
				text-align: center;
				padding: 10px 0;
				label{
					font-size: 14px;
				}
				label::before{
					font-family: "iconfont"!important;
					content: "\e6a6";
					color: red;
				}
			}
			.myself-foot-contents{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}
		}
	}
</style>
